﻿@page "/components/pagination"
<Pager Title="Pagination" Description="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages."
Indicates="@(new[]{"Example","Disabled and active state","Size","Alignment"})">
	<Demo Title="Example">
		<Description>

		</Description>
		<Run>
			<Pagination>
				<PageItem>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink href="#" >2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Pagination>
	<PageItem>
		<PageLink href=""#"">Previous</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">1</PageLink>
	</PageItem>
	<PageItem Active>
		<PageLink href=""#"">2</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">3</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">Next</PageLink>
	</PageItem>
</Pagination>
```
			")
		</Code>
	</Demo>
	<Demo Title="Disabled and active state">
		<Description>
			Set <code>Disabled</code> for unclickable <code>PageItem</code> or <code>Active</code> for current item. 
			Also can set <code>Texted</code> for active item of <code>PageLink</code> to be span.
		</Description>
		<Run>
			<Pagination>
				<PageItem Disabled>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink Texted>2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Pagination>
	<PageItem Disabled>
		<PageLink href=""#"">Previous</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">1</PageLink>
	</PageItem>
	<PageItem Active>
		<PageLink Texted>2</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">3</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">Next</PageLink>
	</PageItem>
</Pagination>
```
			")
		</Code>
	</Demo>
	<Demo Title="Size">
		<Description>
			Set <code>Size</code> for <code>Pagination</code> component and 
			have <code>PaginationSize.Small</code> for small size or <code>PaginationSize.Large</code> for large size.
		</Description>
		<Run>
			<Pagination Size="Size.Small">
				<PageItem Disabled>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink Texted>2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>

			<Pagination Size="Size.Large">
				<PageItem Disabled>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink Texted>2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Pagination Size=""PaginationSize.Small"">
	...
</Pagination>

<Pagination Size=""PaginationSize.Large"">
	...
</Pagination>
```
			")
		</Code>
	</Demo>
		<Demo Title="Alignment">
		<Description>
			Set <code>CssClass</code> to change the alignment of pagination components with flexbox utilities.
		</Description>
		<Run>
			<Pagination CssClass="Css.Class.JustifyContent(JustifyContent.Center)">
				<PageItem Disabled>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink Texted>2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Pagination CssClass=""Css.Class.JustifyContent(JustifyContent.Center)"">
	<PageItem Disabled>
		<PageLink href=""#"">Previous</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">1</PageLink>
	</PageItem>
	<PageItem Active>
		<PageLink Texted>2</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">3</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">Next</PageLink>
	</PageItem>
</Pagination>
```
			")
		</Code>
	</Demo>
	<Demo>
		<Description>
		</Description>
		<Run>
			<Pagination CssClass="Css.Class.JustifyContent(JustifyContent.End)">
				<PageItem Disabled>
					<PageLink href="#">Previous</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">1</PageLink>
				</PageItem>
				<PageItem Active>
					<PageLink Texted>2</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">3</PageLink>
				</PageItem>
				<PageItem>
					<PageLink href="#">Next</PageLink>
				</PageItem>
			</Pagination>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Pagination CssClass=""Css.Class.JustifyContent(JustifyContent.End)"">
	<PageItem Disabled>
		<PageLink href=""#"">Previous</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">1</PageLink>
	</PageItem>
	<PageItem Active>
		<PageLink Texted>2</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">3</PageLink>
	</PageItem>
	<PageItem>
		<PageLink href=""#"">Next</PageLink>
	</PageItem>
</Pagination>
```
			")
		</Code>
	</Demo>
</Pager>